<template>
	<view class="collection l-whitespace">
		<view class="collection-wrap">
			<view class="collection-wrap-bg bg5">
				<view class="qrval-wrap">
					<view class="qrval">
						<view class="wallet">LABtk-Wallet</view>
					</view>
				</view>
				<view class="collection-qrcode">
					<view class="collection-qrcode-title">收款地址</view>
					<view class="uimCode" @click="onClipboard">
						{{qrval}}
						<view class="iconfont iconqiehuan color2"></view>
					</view>
					<qrcode :val="qrval" :size="qrsize" ref="qrcode"></qrcode>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import qrcode from '../../../components/qrcode/qrcode.vue'
	import { mapGetters } from 'vuex';
	export default {
		data() {
			return {
				title: '二维码生成',
				name: '',
				qrval: '',
				qrsize: 200,
			}
		},
		onShow () {
			this.qrval = this.userInfo.addr
			setTimeout(() => {
				this.creatQrcode();
			},10)
		},
		computed: {
			...mapGetters({
				userInfo: 'getUserInfo'
			})
		},
		methods: {
			creatQrcode() {
				if (!this.qrval) {
					uni.showToast({
						title: '请输入二维码内容',
						icon: 'none'
					});
					return;
				}
				this.$refs.qrcode.creatQrcode();
			},
			clearQrcode() {
				this.$refs.qrcode.clearQrcode();
			},
			onClipboard () {
				uni.setClipboardData({
					data: this.qrval,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						})
					}
				});
			}
		},
		components: {
			qrcode
		}
	}
</script>
<style scoped lang="scss">
	.collection {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		text-align: center;
		&-wrap {
			margin-top: 200upx;
			padding: 0 40upx;
			&-bg {
				overflow: hidden;
				border-radius: 20upx;
			}
		}
		.qrval-wrap {
			background: linear-gradient(#F04948 0%,#D8022A 100%);
		}
		.qrval {
			padding: 30upx 40upx 15upx 40upx;
			.wallet {
				font-size: 36upx;
				color: #FDECEC;
			}
		}
		&-qrcode {
			padding: 50upx;
			&-title {
				margin-bottom: 15upx;
				font-size: 38upx;
				text-align: center;
			}
			.uimCode {
				display: block;
				margin-bottom: 30upx;
				font-size: 24upx;
				color: #000;
				.iconqiehuan {
					font-size: 26upx;
					margin-left: 10upx;
				}
			}
		}
	}
</style>
